{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/base/base-protocol.html" %}

{% from "macros-protocol.html" import split, card with context %}

{% block page_title %}{{ ftl('firefox-products-are') }}{% endblock %}
{% block page_desc %}{{ ftl('learn-more-about') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('more') }}
{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
<main>
  {% call split(
    image=picture(
      'img/firefox/more/privacy-hero-700.png',
      sources=[
      {
        'media': '(min-width: 768px)',
        'srcset': {
          'img/firefox/more/privacy-hero-500.png': '500w',
          'img/firefox/more/privacy-hero-700.png': '700w',
          'img/firefox/more/privacy-hero-900.png': '900w',
          'img/firefox/more/privacy-hero-1100.png': '1100w',
        },
        'sizes': {
          'default': 'calc(50vw - 192px)'
        }
      },
      {
        'media': '(max-width: 767px)',
        'srcset': {
          'img/placeholder.png': 'default'
        }
      }
      ],
      optional_attributes={
        'height': '626',
        'width': '680',
        'class': 'mzp-c-split-media-asset'
      }
    ),
    block_class='page-hero mzp-l-split-hide-media-on-sm-md mzp-t-split-nospace t-mobile-nospace',
    theme_class='mzp-t-dark',
    media_class='mzp-l-split-v-end'
  ) %}
    <h2>{{ ftl('learn-more-about-firefox', fallback='firefox-products-are') }}</h2>
    <p><a href="{{ url('firefox.faq') }}" class="mzp-c-button mzp-t-product">{{ ftl('learn-more-faq') }}</a></p>
  {% endcall %}

  <div class="mzp-l-content">
    <div class="mzp-l-card-third">

      {{ card(
        title=ftl('what-is-a'),
        ga_title='What is a browser',
        image=resp_img('img/firefox/more/what-is-a-browser.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('a-web-browser'),
        link_url=url('firefox.browsers.what-is-a-browser'),
      )}}

      {{ card(
        title=ftl('the-history-of'),
        ga_title='Browser History',
        image=resp_img('img/firefox/more/browser-history.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('firefox-has-been'),
        link_url=url('firefox.browsers.browser-history')
      )}}

      {{ card(
        title=ftl('incognito-browser-what'),
        ga_title='Features Private Browsing',
        image=resp_img('img/firefox/more/incognito-browser.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('firefox-calls-it'),
        link_url=url('firefox.browsers.incognito-browser')
      )}}

    </div>
    <div class="mzp-l-card-third">

      {{ card(
        title=ftl('firefox-more-avoid-misinformation-heading'),
        ga_title='Avoid Misinformation',
        image=resp_img('img/firefox/more/avoid-misinformation.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('firefox-more-avoid-misinformation-desc'),
        link_url=url('firefox.more.misinformation')
      )}}

      {{ card(
        title=ftl('update-your-browser'),
        ga_title='Update Browser',
        image=resp_img('img/firefox/more/update-browser.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('the-firefox-browser'),
        link_url=url('firefox.browsers.update-browser'),
      )}}

      {{ card(
        title=ftl('firefox-fights-for'),
        ga_title='Firefox Windows',
        image=resp_img('img/firefox/more/firefox-windows.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('easy-migration-of'),
        link_url=url('firefox.windows')
      )}}

    </div>
    <div class="mzp-l-card-third">

      {{ card(
        title=ftl('firefox-respects-your'),
        ga_title='Firefox Mac',
        image=resp_img('img/firefox/more/firefox-mac.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('firefox-doesnt-spy'),
        link_url=url('firefox.mac')
      )}}

      {{ card(
        title=ftl('firefox-for-linux'),
        ga_title='Firefox Linux',
        image=resp_img('img/firefox/more/firefox-linux.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('new-school-meets'),
        link_url=url('firefox.linux')
      )}}

      {{ card(
        title=ftl('firefox-for-windows'),
        ga_title='Firefox Win 64',
        image=resp_img('img/firefox/more/firefox-64-bit.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('we-worry-about'),
        link_url=url('firefox.browsers.windows-64-bit')
      )}}

    </div>
    <div class="mzp-l-card-third">

      {{ card(
        title=ftl('firefox-more-firefox-chromebook'),
        ga_title='Firefox Products',
        image=resp_img('img/firefox/more/firefox-chromebook.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('firefox-more-while-on-chromebook'),
        link_url=url('firefox.browsers.chromebook'),
      )}}

      {{ card(
        title=ftl('firefox-more-firefox-quantum'),
        ga_title='Firefox Browsers',
        image=resp_img('img/firefox/more/firefox-quantum.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('firefox-more-quantum-was-revolution'),
        link_url=url('firefox.browsers.quantum')
      )}}

      {{ card(
        title=ftl('choose-which-firefox'),
        ga_title='Firefox All',
        image=resp_img('img/firefox/more/firefox-all.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('we-believe-everyone'),
        link_url=url('firefox.all')
      )}}

    </div>
    <div class="mzp-l-card-third">

      {{ card(
        title=ftl('firefox-more-fingerprinter-blocking'),
        ga_title='Fingerprinter Blocking',
        image=resp_img('img/firefox/more/fingerprint.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('firefox-more-fingerprinting-is-a'),
        link_url=url('firefox.features.fingerprinting')
      )}}

      {{ card(
        title=ftl('firefox-more-translate-the-web'),
        ga_title='Translate',
        image=resp_img('img/firefox/more/firefox-all.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        desc=ftl('firefox-more-translate-more-than'),
        link_url=url('firefox.features.translate')
      )}}

    </div>
  </div>
</main>
{% endblock %}
